import React, {Component} from 'react';
import ReactMusicPlayer from './react-music-player/react-music-player';
import './App.css';

let mod = {
    margin: "30px",
    padding: "80px",
    textAlign: "center",
    webkitBorderRadius: "10px",
    mozBorderRadius: "10px",
    borderRadius: "10px",
    webkitBoxShadow: "0 0 3px rgba(0,0,0,.1)",
    mozBoxShadow: "0 0 3px rgba(0,0,0,.1)",
    boxShadow: "0 0 3px rgba(0,0,0,.1)"
}

let btn = {
    textDecoration: "none",
    color: "#fff",
    border: "none",
    display: "inline-block",
    transition: "box-shadow .2s ease-in-out",
    borderRadius: "8px",
    webkitBorderRadius: "8px",
    mozBorderRadius: "8px",
}

let span = {
    display: "inline-block",
    padding: "10px 20px",
    margin: "5px",
    fontFamily: '"cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif',
    lineHeight: "1",
    fontSize: "250%",
    borderRadius: "8px",
    textShadow: "0 -1px 1px rgba(19,65,88,.8)",
    background: "-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6))"
}

let Button = function () {
    return (

        <a href="#" style={btn}>
            <span style={span}>Press this!</span>
        </a>

    );
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            songInfo: [
                {
                    src: "http://audio.xmcdn.com/group29/M08/FE/64/wKgJXVljZ3zygqVjACc1nLhgPHo436.m4a",
                    artist: "青蛙乐队",
                    name: "一百万个可能",
                    img: "http://singerimg.kugou.com/uploadpic/softhead/400/20160913/20160913140233132.jpg",
                    id: "66575568441"
                },
                {
                    src: "http://qqma.tingge123.com:83/20081119/甜甜的.mp3",
                    artist: "周杰伦",
                    name: "一百万个可能2",
                    img: "http://audio.xmcdn.com/group59/M06/83/F1/wKgLeFzM-QiRwoYRACIFhTWCgYI180.m4a",
                    id: "66575568442"
                },
                {
                    src: "http://qqma.tingge123.com:83/20081120/不得不爱.mp3",
                    artist: "潘玮柏",
                    name: "不得不爱",
                    img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=781787101,1026788150&fm=27&gp=0.jpg",
                    id: "66575568443"
                },
                {
                    src: "http://qqma.tingge123.com:83/123/2016/07/张韶涵 - 再见之前.mp3",
                    artist: "张韶涵",
                    name: "再见之前",
                    img: "http://games.enet.com.cn/jzimages/201009/s1283410316.jpg",
                    id: "66575568444"
                },
                {
                    src: "http://qqma.tingge123.com:83/123/2016/05/G.E.M.邓紫棋 - 画.mp3",
                    artist: "邓紫棋",
                    name: "画",
                    img: "http://img.18183.com/uploads/allimg/140510/41-140510145612.jpg",
                    id: "66575568445"
                },
                {
                    src: "http://qqma.tingge123.com:83/123/2014/12/无字碑-张靓颖.mp3",
                    artist: "张靓颖",
                    name: "无字碑",
                    img: "http://singerimg.kugou.com/uploadpic/softhead/400/20170628/20170628110356447.jpg",
                    id: "66575568446"
                },
                {
                    src: "http://qqma.tingge123.com:83/123/2010/09/叶子-阿桑.mp3",
                    artist: "阿桑",
                    name: "叶子",
                    img: "http://star.kuwo.cn/star/starheads/180/66/26/1776695622.jpg",
                    id: "66575568447"
                },
                {
                    src: "http://qqma.tingge123.com:83/20081117/认真的雪.mp3",
                    artist: "薛之谦",
                    name: "认真的雪",
                    img: "http://img14.3lian.com/201512/02/9478d19283ce6f990741fbac92203132.jpg",
                    id: "66575568449"
                },

                {
                    src: "http://qqma.tingge123.com:83/20081117/杀手.mp3",
                    artist: "林俊杰",
                    name: "杀手",
                    img: "http://wenwen.soso.com/p/20070621/20070621060503-1458706809.jpg",
                    id: "66575568448"
                },
            ]
        };
        this.delSong = this.delSong.bind(this)
    }

    delSong(i, id) {
        console.log(id)
        this.state.songInfo.splice(i, 1)

    }

    render() {

        return (
            <div className="App">
                <div style={mod}>
                    <Button/>
                    <Button/>
                    <Button/>
                </div>
                <ReactMusicPlayer
                    info={this.state.songInfo}
                    onDel={this.delSong}
                />

            </div>
        );
    }
}

export default App;
